<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title></title>
		<!-- element 自定义 css -->
		<link rel="stylesheet" href="../css/element.css" />
		<!-- public 自定义 css -->
		<link rel="stylesheet" href="../css/public.css" />

		<!-- 头部css -->
		<link rel="stylesheet" href="../common/css/header.css" />

		<!-- 详情共用样式 -->
		<link rel="stylesheet" href="css/detailInfo.css" />
	</head>

	<body>
		<!-- 头部嵌入 -->
		<script type="text/javascript" src="../common/header.js"></script>
		<!-- 导航 嵌入 -->
		<script type="text/javascript" src="../common/nav.js"></script>
		<div class="serverDetail-wrapper section" v-cloak>
			<div class="serverDetail-content-wrapper">
				<div class="serverListNav">
					<span @click="handleClickGotoHomePage" class="nav-item">总览</span>
					<span class="nav-item noClick">域名</span>
					<span @click="handleClickGotoDomainHomePage" class="nav-item">域名管理</span>
					<span class="nav-item">域名信息</span>
				</div>
				<div class="form-wrapper">
					<span class="from-title"><i @click="handleClickGotoDomainHomePage" class="icon el-icon-back"></i>域名信息</span>
					<div class="detailInfoContent fboxRow">
						<div class="imgwrapper"></div>
						<div class="contentwrapper">
							<div class="contentwrapper-info">
								<div class="contentwrapper-info-item">
									<span class="item-title">所有者</span>
									<span class="item-val">江天宇</span>
								</div>
								<div class="contentwrapper-info-item">
									<span class="item-title">有效期至</span>
									<span class="item-val">2020-10-05</span>
								</div>



							</div>
							<div class="contentwrapper-button-wrapper fboxRow">
								<div @click="handleClickAnalysisDomainName" :class="{'noClick': !canAnalysis}" class="yzButton">解析</div>
								<div @click="handleClickOutDomainName" :class="{'noClick': !canOutDomainName}" class="yzButton">转出</div>
								<div @click="handleClickRenewDomainName" class="yzButton">续费</div>
								<div @click="handleClickDNS" style="width: 140px;" class="yzButton">管理DNS服务器</div>
							</div>
						</div>
					</div>
				</div>

				<div class="form-wrapper">
					<el-tabs v-model="activeTabName" @tab-click="handleClickTab">
						<el-tab-pane name="first">
							<span class="el-tabs-title" slot="label">域名详情</span>
							<div class="contentInfo-wrapper">
								<p class="content-title">基本信息</p>
								<div class="content-info-wrapper fboxRow">
									<div class="content-info fboxRow">
										<div class="content-info-item">
											<span class="item-key">
												域名所有者：
											</span>
											<span class="item-val">
												1核1G
											</span>
										</div>
										<div class="content-info-item">
											<span class="item-key">
												注册时间：
											</span>
											<span class="item-val">
												50G
											</span>
										</div>
										<div class="content-info-item">
											<span class="item-key">
												到期时间：
											</span>
											<span class="item-val">
												100G
											</span>
										</div>

										<div class="content-info-item">
											<span class="item-key">
												DNS服务器：
											</span>
											<span class="item-val">
												5Mbps
											</span>
										</div>
										<div class="content-info-item">
											<span class="item-key">
												实名认证状态：
											</span>
											<span class="item-val" style="color: #3FBF70;">
												已认证
											</span>
											<span v-if="false" class="item-val" style="color: #FF4949;">
												未认证
											</span>
										</div>
									</div>
								</div>
							</div>
							<div class="contentInfo-wrapper">
								<p class="content-title">域名信息</p>
								<div class="content-info-wrapper fboxRow">
									<div class="content-info fboxRow">
										<div class="content-info-item">
											<span class="item-key">
												联系人姓名：
											</span>
											<span class="item-val">
												江
											</span>
										</div>
										<div class="content-info-item">
											<span class="item-key">
												电子邮箱：
											</span>
											<span class="item-val">
												150： 00
											</span>
										</div>
										<div class="content-info-item">
											<span class="item-key">
												联系人电话：
											</span>
											<span class="item-val">
												2020-11-25
											</span>
										</div>

										<div class="content-info-item">
											<span class="item-key">
												地区：
											</span>
											<span class="item-val">
												2020-11-30
											</span>
										</div>
										<div class="content-info-item">
											<span class="item-key">
												邮编：
											</span>
											<span class="item-val">
												5个月
											</span>
										</div>
										<div class="content-info-item">
											<span class="item-key">
												联系人地址：
											</span>
											<span class="item-val">
												未开通
											</span>
										</div>
									</div>
								</div>
							</div>

						</el-tab-pane>


						<el-tab-pane class="opeartionLog-wrapper" label="操作日志" name="sixth">
							<span class="el-tabs-title" slot="label">操作日志</span>
							<el-table :data="logotableData" style="width: 100%">
								<el-table-column prop="behavior" label="操作行为" width="auto">
									<template slot-scope="scope">
										{{scope.row.behavior}}
									</template>
								</el-table-column>
								<el-table-column prop="time" label="操作时间">
									<template slot-scope="scope">
										{{scope.row.time}}
									</template>

								</el-table-column>






							</el-table>

							<div class="pagination-wrapper">
								<div class="total-wrapper">
									<span class="totalSize">共有 {{logpageInfo.totalSize}} 条记录</span>
									<el-select v-model="logpageInfo.pagesize">
										<el-option v-for="item in logpageOptions" :key="item.value" :label="item.label" :value="item.value">
										</el-option>
									</el-select>
								</div>
								<el-pagination @size-change="handleSizeLogChange" @current-change="handleCurrentLogChange" :current-page="logpageInfo.currentPage"
								 layout="prev, pager, next, jumper" :total="logpageInfo.totalSize">
								</el-pagination>
							</div>

						</el-tab-pane>



					</el-tabs>
				</div>

				<el-dialog @closed="closeDNSdialog" style="box-sizing: border-box;" width="760px" class="yz-el-dialog"
				 :visible.sync="dialogDNSVisble">
					<div slot="title" class="dialog-title">
						管理DNS服务器
					</div>
					<div class="dialog-content">
						<div class="desc-wrapper fboxRow mb-20">
							注：您可以更改您的域名DNS解析服务器，因为全球各地需要同步，可能需要长达2-24小时全球生效。
						</div>

						<div class="yz-tab-wrapper">
							<div :class="{'active': dnsDiskTabIndex === 0}" @click="dnsDiskTabIndex = 0" class="yz-tab-item">使用默认的域名服务器</div>
							<div :class="{'active': dnsDiskTabIndex === 1}" @click="dnsDiskTabIndex = 1" class="yz-tab-item">使用第三方域名服务器</div>
						</div>

						<div v-if="dnsDiskTabIndex === 0" class="tab-content">
							<el-checkbox v-model="checkUseDefaultName">使用默认的域名服务器</el-checkbox>
						</div>

						<div v-if="dnsDiskTabIndex === 1" class="tab-content">
							<el-form :model="otherDomainForm" :rules="rules" ref="otherDomainForm" label-width="auto" class="demo-ruleForm">
								<el-form-item v-for="(item,key)  in otherDomainForm" :key="key" :label="item.label" :prop="key">
									<el-input v-model="item.value"></el-input>
								</el-form-item>
							</el-form>
						</div>
						<div class="dialog-button-wrapper fboxRow">
							<div @click="handleClickConfirmDNS" class="yzButton  confirm">确认</div>
							<div @click="dialogDNSVisble = false" class="yzButton cancelButton">取消</div>
						</div>
					</div>
				</el-dialog>
			</div>

			<script src="../js/util.js"></script>
			<!-- vue  -->
			<script>
				let vmServerDetail = new Vue({

					el: '.serverDetail-wrapper',
					computed: function() {

					},
					data: function() {
						return {
							// 新增
							dnsDiskTabIndex: 0, //dns dialog的tab选择   参数 0 或 1  默认为0  即选中第一个
							checkUseDefaultName: true, // 是否勾选使用默认域名   默认勾选
							outResultInfo: {},
							domainNameId: undefined,
							analysisDialogVisble: true, // 解析dialog是否显示
							canAnalysis: true, // 是否可以解析
							canOutDomainName: true, // 是否可以转出域名 
							dialogDNSVisble: false, // 管理DNS的dialog
							initotherDomainForm: {},
							otherDomainForm: {
								dns1: {
									label: 'DNS服务器1',
									value: undefined
								},
								dns2: {
									label: 'DNS服务器2',
									value: undefined
								},
								dns3: {
									label: 'DNS服务器3',
									value: undefined
								},
								dns4: {
									label: 'DNS服务器4',
									value: undefined
								},
								dns5: {
									label: 'DNS服务器5',
									value: undefined
								},

							},
							rules: {

							},
							// 操作日志信息
							logotableData: [{
								id: 2,
								behavior: '域名注册成功',
								time: '2020-11-25',
							}, {
								id: 3,
								behavior: '域名注册失败',
								time: '2020-11-25',
							}],
							activeTabName: 'first',
							logpageInfo: {
								pagesize: 5,
								currentPage: 1,
								totalSize: 100
							},

							logpageOptions: [{
								value: 5,
								label: '5条/页'
							}],
						}
					},

					methods: {
						// 点击确认 管理DNS服务器
						handleClickConfirmDNS: function() {
							let that = this
							if (this.dnsDiskTabIndex === 0) {
								// 默认
								if (this.checkUseDefaultName === false) {
									this.$message.error('请先勾选使用默认域名！')
									return
								}
								this.dialogDNSVisble = false
							} else if (this.dnsDiskTabIndex === 1) {
								this.$refs['otherDomainForm'].validate(function(valid) {
									if (valid) {
										that.dialogDNSVisble = false
									} else {
										that.$message.error('请先完善表单！')
										return false;
									}
								})
							}

						},
						// 监听关闭dns dialog的方法
						closeDNSdialog: function() {
							this.checkUseDefaultName = true
							this.dnsDiskTabIndex = 0
							this.otherDomainForm = this.initotherDomainForm
						},
						// 跳转到首页的方法
						handleClickGotoHomePage: function() {
							gotohomePage()
						},

						// 跳转到域名管理页面
						handleClickGotoDomainHomePage: function() {
							window.open('index.html', '_self')
						},
						// 点击续费域名
						handleClickRenewDomainName: function(row) {
							window.open('../priceCenter/renewDetail.html?domainNameId=' + this.domainNameId, '_self')
						},

						// 点击转出域名
						handleClickOutDomainName: function() {

							if (this.canOutDomainName === true) {
								console.log('点击转出域名')
								window.open('outForm.html?domainNameId=' + this.domainNameId, '_self')
							}
						},

						// 点击解析域名
						handleClickAnalysisDomainName: _throttle(function() {
							if (this.canAnalysis === true) {
								console.log('点击解析域名')
								window.open('analysis.html','_self')
								
							}
						}),

						// 管理dns服务器
						handleClickDNS: _throttle(function() {
							this.dialogDNSVisble = true
						}),
						handleSizeLogChange: function(val) {
							console.log('日志每页xxxx条')
						},
						handleCurrentLogChange: function(val) {
							console.log('日志当前页为xxxxx')
						},
						handleSizeChange: function(val) {
							console.log('每页xxxx条')
						},
						handleCurrentChange: function(val) {
							console.log('当前页为xxxxx')
						},
						// 点击切换tab
						handleClickTab: function(tab) {
							let name = tab.name
						}
					},
					mounted: function() {
						let params = getUrlParams()
						// 模拟后台处理 是否可以解析 可以转出域名
						if (Number(params.domainNameId) === 2) {
							this.canAnalysis = false
							this.canOutDomainName = false
						}
						this.domainNameId = Number(params.domainNameId)

						this.initotherDomainForm = deepCopy(this.otherDomainForm)

						// 校验修改手机验证码
						var validateDNS = function(rule, value, callback) {
							console.log(value)
							if (value.value === undefined) {
								callback(new Error('请填写服务器名称！'))
							} else {
								callback()
							}

						}

						// 处理rules
						for (let item in this.otherDomainForm) {
							this.rules[item] = [{
								required: true,
								validator: validateDNS,
								trigger: 'blur'
							}]
						}
					}

				})
			</script>
	</body>
</html>
